<template>
    <div
        class="common-layout"
        v-loading="loading"
        element-loading-text="请稍后"
    >
        <div v-if="loading"></div>
        <el-container v-else>
            <el-header>
                <el-row
                    class="row"
                    type="flex"
                    justify="space-between"
                    align="middle"
                >
                    <el-col span="{2}">
                        <h1>摄影后台管理系统</h1>
                    </el-col>
                    <el-col span="{2}">
                    <div>
                        <el-dropdown>
                            <el-avatar
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />

        <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item >{{user ? user.username : '匿名'}}</el-dropdown-item>
                            <el-dropdown-item divided>修改密码</el-dropdown-item>
                            <el-dropdown-item>退出</el-dropdown-item>
                        </el-dropdown-menu>
                        </template>
                        </el-dropdown>
   
                    </div>
                </el-col>
                </el-row>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu
                        active-text-color="#ffd04b"
                        background-color="#545c64"
                        class="el-menu-vertical-demo"
                        :router="true"
                        text-color="#fff"
                    >
                        <el-menu-item index="/manage/user">
                            <el-icon><User /></el-icon>
                            <span>用户管理</span>
                        </el-menu-item>
                        <el-menu-item index="/manage/role">
                            <el-icon><Avatar /></el-icon>
                            <span>角色管理</span>
                        </el-menu-item>
                        <el-menu-item index="/manage/function">
                            <el-icon><CopyDocument /></el-icon>
                            <span>功能点管理</span>
                        </el-menu-item>
                        <el-menu-item index="/manage/type">
                            <el-icon><Grid /></el-icon>
                            <span>分类管理</span>
                        </el-menu-item>
                        <el-menu-item index="/manage/caroursel">
                            <el-icon><icon-menu /></el-icon>
                            <span>轮播图管理</span>
                        </el-menu-item>
                        <el-menu-item index="/manage/content">
                            <el-icon>
                                <document />
                            </el-icon>
                            <span>内容管理</span>
                        </el-menu-item>
                        <el-menu-item index="/manage/content_order">
                            <el-icon>
                                <Sort />
                            </el-icon>
                            <span>图文排序</span>
                        </el-menu-item>
                        <el-menu-item index="/manage/changePwd">
                                <el-icon>
                                    <key />
                                </el-icon>
                                <span>修改密码</span>
                            </el-menu-item>
                            <el-menu-item index="/manage/systemSet">
                                <el-icon><Tools /></el-icon>
                                <span>系统设置</span>
                            </el-menu-item>
                        
                    </el-menu>
                </el-aside>
                <el-main >
                    <RouterView></RouterView>
                </el-main>
            </el-container>
        </el-container>
    </div>

</template>
<script setup>
import {
    Document,
    Key,
    Menu as IconMenu,
    Location,
    Setting,
    Notebook,
    Tools,
    Delete,
    Sort,
    Grid,
    User,
    Avatar,
    CopyDocument
} from "@element-plus/icons-vue";
import { onMounted, ref } from "vue";
import { useRouter, onBeforeRouteUpdate } from "vue-router";

import { useContentStore } from "@/stores/content";
import { useUserStore } from "@/stores/user";
import { storeToRefs } from "pinia";
const { fetchContentTypes } = useContentStore();
const userStore = useUserStore();
const { fetchUser } = userStore;
const { user } = storeToRefs(userStore);
const loading = ref(true);
const router = useRouter();

onMounted(async () => {
    await fetchUser();
    loading.value = false;
    // setTimeout(() => {
    //     if (status == 0 || status == 401) {
    //         router.push("/");
    //         return;
    //     }
    //     // user.value = data;
    //     loading.value = false;
    //     fetchContentTypes();
    // }, 2000);
});
function handleLogout() {
    // localStorage.clear("token");
    router.push("/");
}
</script>
<style>
.common-layout {
    height: 100%;
}
h1 {
    margin: 0;
}
.row {
    height: 60px;
}
.el-header {
    background-color: #001529;
    color: white;
}
.el-main {
    /* overflow: hidden; */
}
</style>
